@import "//fonts.googleapis.com/css?family=Kalam";
.codepen-wrapper[data-codepen-id="ZYMOVw"] *,
.codepen-wrapper[data-codepen-id="ZYMOVw"] *:before,
.codepen-wrapper[data-codepen-id="ZYMOVw"] *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

.codepen-wrapper[data-codepen-id="ZYMOVw"] html {
background: #51cef5;
height: 100%;
}

.codepen-wrapper[data-codepen-id="ZYMOVw"] p {
font-family: 'Kalam', cursive;
text-align: center;
}

.codepen-wrapper[data-codepen-id="ZYMOVw"] iframe {
position: absolute;
left: -9999px;
visibility: hidden;
}

.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 {
position: relative;
display: block;
width: 147px;
height: 41px;
margin: 50px auto;
border: solid #131a1a;
border-width: 61px 59px 66px 59px;
border-radius: 6px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1:before, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1:after {
content: " ";
position: absolute;
z-index: 2;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1:before {
background: #0d0d0b;
box-shadow: inset 0 0 0 3px #2c2c2c, 244px 0 0 -3px #0d0d0b, 244px 0 0 0 #2c2c2c, 0 147px 0 -3px #0d0d0b, 0 147px 0 0 #2c2c2c, 244px 147px 0 -3px #0d0d0b, 244px 147px 0 0 #2c2c2c;
width: 11px;
height: 11px;
top: -56px;
left: -54px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1:after {
background: #0d0d0b;
box-shadow: inset 0 0 0 7px #636665, 204px 0 0 -7px #0d0d0b, 204px 0 0 0 #636665;
width: 21px;
height: 21px;
top: 81px;
left: -39px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label {
position: absolute;
width: 147px;
height: 41px;
top: -53px;
left: -52px;
border: solid #ddc997;
border-width: 53px 52px 24px 52px;
border-radius: 0 0 15px 15px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label:before, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label:after {
content: " ";
position: absolute;
z-index: 1;
top: -53px;
border: solid 10px transparent;
border-top-color: #131a1a;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label:before {
left: -52px;
border-left-color: #131a1a;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label:after {
right: -52px;
border-right-color: #131a1a;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label p {
position: absolute;
text-align: center;
color: #136669;
font-size: 17px;
width: 147px;
height: 41px;
top: -19px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label p:before, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label p:after {
content: " ";
position: absolute;
z-index: 1;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label p:before {
background: #ca3618;
width: 52px;
height: 1px;
top: 19px;
left: -52px;
box-shadow: 0 7px 0 0 #ca3618, 0 14px 0 0 #ca3618, 0 20px 0 0 #ca3618, 0 21px 0 0 #ca3618, 0 22px 0 0 #ca3618, 0 23px 0 0 #ca3618, 0 27px 0 0 #ca3618, 0 28px 0 0 #ca3618, 0 29px 0 0 #ca3618, 0 30px 0 0 #ca3618, 0 34px 0 0 #ca3618, 0 35px 0 0 #ca3618, 0 36px 0 0 #ca3618, 0 37px 0 0 #ca3618, 199px 0 0 0 #ca3618, 199px 7px 0 0 #ca3618, 199px 14px 0 0 #ca3618, 199px 20px 0 0 #ca3618, 199px 21px 0 0 #ca3618, 199px 22px 0 0 #ca3618, 199px 23px 0 0 #ca3618, 199px 27px 0 0 #ca3618, 199px 28px 0 0 #ca3618, 199px 29px 0 0 #ca3618, 199px 30px 0 0 #ca3618, 199px 34px 0 0 #ca3618, 199px 35px 0 0 #ca3618, 199px 36px 0 0 #ca3618, 199px 37px 0 0 #ca3618;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .label p:after {
width: 251px;
height: 3px;
left: -52px;
bottom: -44px;
border-top: solid 7px #ca3617;
border-bottom: solid 15px #ca3617;
border-radius: 0 0 15px 15px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .details, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .details:before {
position: absolute;
border-top: solid 0 transparent;
border-left: solid 11px transparent;
border-right: solid 11px transparent;
border-bottom: solid 36px #010000;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .details {
width: 160px;
height: 0;
top: 71px;
left: -18px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .details:before {
content: " ";
z-index: 1;
width: 152px;
height: 0;
top: 3px;
left: -7px;
border-bottom: solid 33px #191917;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .details:after {
content: " ";
position: absolute;
background: #232929;
z-index: 2;
width: 265px;
height: 1px;
top: 25px;
left: -52px;
box-shadow: 0 -5px 0 0 #232929, 0 -10px 0 0 #232929, 0 -15px 0 0 #232929, 0 -20px 0 0 #232929, 0 -25px 0 0 #232929;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel {
-moz-animation: tape-wheel 6s linear infinite;
-webkit-animation: tape-wheel 6s linear infinite;
animation: tape-wheel 6s linear infinite;
position: absolute;
background: #e6e6e6;
z-index: -1;
width: 6px;
height: 6px;
top: 17px;
border: solid 1px #3b3b3b;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel.left {
left: 18px;
box-shadow: 0 0 0 1px #e6e6e6, 0 0 0 14px #3b3b3b, 0 0 0 15px #e6e6e6, 0 0 0 16px #3b3b3b, 0 0 0 17px #c8c8c8, 0 0 0 19px #3b3b3b, 0 0 0 22px #c8c8c8, 0 0 0 25px #3b3b3b, 0 0 0 29px #c8c8c8, 0 0 0 47px #3b3b3b;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel.right {
right: 18px;
box-shadow: 0 0 0 1px #e6e6e6, 0 0 0 14px #3b3b3b, 0 0 0 15px #e6e6e6, 0 0 0 16px #3b3b3b, 0 0 0 17px #c8c8c8, 0 0 0 19px #3b3b3b, 0 0 0 22px #c8c8c8, 0 0 0 25px #3b3b3b, 0 0 0 29px #c8c8c8, 0 0 0 37px #3b3b3b;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span:before, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span:after {
position: absolute;
width: 4px;
height: 28px;
border-top: solid 4px #e6e6e6;
border-bottom: solid 4px #e6e6e6;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span {
top: -15px;
left: 1px;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span:before {
content: " ";
transform: rotateZ(120deg);
transform-origin: center center 0;
top: -4px;
left: 0;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span:after {
content: " ";
transform: rotateZ(240deg);
transform-origin: center center 0;
top: -4px;
left: 0;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span:before, .codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span:after {
width: 5px;
height: 48px;
border-top: solid 6px #c8c8c8;
border-bottom: solid 6px #c8c8c8;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span {
top: -28px;
left: 0;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span:before {
content: " ";
transform: rotateZ(120deg);
transform-origin: center center 0;
top: -6px;
left: 0;
}
.codepen-wrapper[data-codepen-id="ZYMOVw"] #mixtape-vol-1 .tape-wheel span + span:after {
content: " ";
transform: rotateZ(240deg);
transform-origin: center center 0;
top: -6px;
left: 0;
}

@-moz-keyframes tape-wheel {
to {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes tape-wheel {
to {
transform: rotateZ(360deg);
}
}
@keyframes tape-wheel {
to {
transform: rotateZ(360deg);
}
}